<script setup>
import { ref } from "vue";

import { onLoad, onShow } from "@dcloudio/uni-app";
import { base_URL } from "@/utils/http";
import { traceInfo } from "@/services/order";

const loading = ref(true);
const detail = ref({});
const list = ref({});
const codee = ref("");
const out_trade_no = ref("");
const orderstall = ref("");
const orderobj = ref({});

onLoad((e) => {
  const urlone = window.location.href;
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1]; //当前页面的全部信息
  const route = currentPage.route; //当前路由的路径 pages/login/login
  const options = currentPage.options; //url里面的参数json类型
  out_trade_no.value = e.out_trade_no;
  orderstall.value = e ? e : "";
  gettraceInfo(e.out_trade_no);
});
onShow(() => {
  try {
    document.querySelector("html").style.fontSize = "10px"; // 解决进入小票html 的font-size = 0 的问题
    const urlone = window.location.href; //获取当前路径
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1]; //当前页面的全部信息
    const route = currentPage.route; //当前路由的路径 pages/login/login
    const options = currentPage.options; //url里面的参数json类型
    let subMchId = options.sub_mch_id;
    let outTradeNo = options.out_trade_no;
    let checkCode = options.check_code;
    let t = options.t;
    // let ss = await this.$myRequest({
    //     url: 'index/out/listByCheckCode',
    //     data: {
    //         subMchId,
    //         outTradeNo,
    //         checkCode,
    //         url: urlone
    //     }
    // })
    // this.list = ss.data.date;
  } catch (err) {}

  const mchData = {
    action: "onIframeReady",
    displayStyle: "SHOW_CUSTOM_PAGE",
  };
  const postData = JSON.stringify(mchData);
  window.parent.postMessage(postData, "*");
});
async function gettraceInfo(id) {
  let res = await traceInfo({ out_trace: id });
  if (res.code == 200) {
    orderobj.value = res.data;
  }
}
const toPage = () => {
  // 跳转到指定的h5页面
  const mchData = {
    action: "jumpOut",
    jumpOutUrl: `${base_URL}/pages/paystate/index?out_trade_no=${out_trade_no.value}`,
  }; // 跳转到指定的页面并携带参数
  const postData = JSON.stringify(mchData);
  window.parent.postMessage(postData, "*");
  uni.navigateBack({
    delta: 1, // 返回的页面层数，1 表示返回上一页
  });
};
</script>

<template>
  <view class="content-view">
    <view style="text-align: center;">
      <!-- v-for="item in list" -->
      <view style="text-align: center;">
        <view class="content-view-info">
          <!-- <uqrcode ref="item.skuName" canvas-id="item.skuNamee" :value="item.barCode"></uqrcode> -->
          订单信息
        </view>
        <view class="content-view-info-to">
          <text class="content-one">订单编号</text>
          <text class="content-two">{{
            orderobj.order_id ? orderobj.order_id : "---"
          }}</text>
        </view>
        <view class="content-view-info-to">
          <text class="content-one">订单金额</text>
          <text class="content-two color-red">{{
            orderobj.orders && orderobj.orders.total_price
              ? orderobj.orders.total_price
              : "---"
          }}</text>
        </view>
        <view class="content-view-info-to">
          <text class="content-one">订单时间</text>
          <text class="content-two">{{
            orderobj.orders && orderobj.orders.pay_time
              ? orderobj.orders.pay_time
              : "---"
          }}</text>
        </view>
      </view>
      <!-- <view> {{ orderstall }} </view> -->
    </view>
    <button
      type="primary"
      size="medium"
      shape="circle"
      class="primary-bt"
      @click="toPage"
      :plain="true"
    >
      查看订单状态
    </button>
  </view>
</template>

<style lang="scss">
.content-view {
  width: 100%;
  text-align: center;
}
.content-view-info {
  margin-top: 60rpx;
  padding-bottom: 50rpx;
}
.content-view-info-to {
  margin-top: 20rpx;
}
.content-view-info-to {
  width: 600rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}
.color-red {
  color: red;
}
.primary-bt {
  margin-top: 50rpx;
  width: 500rpx;
}
</style>
